<template>
  <div class="ds">
    <div class="address-title">我的收货地址</div>
    <div class="address-add" @click="LinkTo('/add')">
      <img
        src="http://sucai.suoluomei.cn/sucai_zs/images/add.png?x-oss-process=image/quality,Q_70"
        alt=""
      >
      新增地址
    </div>
    <div class="hz">
      <div class="mr">默认地址</div>
      <div class="mrAddress">{{mrDq}} {{mrDz}}</div>
      <div class="mrName">{{mrMz}} {{mrDh}}</div>
    </div>
    <div class="address-list">
      <div
        class="list"
        v-for="item in items"
        :key="item.index"
        @click="AddressMR(item.addressid,item.address,item.detail,item.contact,item.mobile)"
      >
        <div class="list-img" @click="delAddress(item.addressid)" :data-id="item.addressid">
          <img
            src="http://sucai.suoluomei.cn/sucai_zs/images/erro.png?x-oss-process=image/quality,Q_70"
            alt=""
          >
        </div>
        <div class="add">{{item.address}} {{item.detail}}</div>
        <div class="name">{{item.contact}} {{item.mobile}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import bottomBar from "../components/bottomBar.vue";
import http from "../utils/http";
export default {
  name: "ds",
  data() {
    return {
      items: [],
      mrDq: "",
      mrDz: "",
      mrMz: "",
      mrDh: ""
    };
  },
  created() {
    // 设置地址列表
    var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // console.log('res',res)
    let that = this;
    http
      .post("Zmhf/index", {
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "getAddressList",
        data: {}
      })
      .then(function(response) {
        console.log("地址", response.data);
        that.items = response.data;
        var Address = response.data;
        http
          .post("Zmhf/index", {
            key: "be15d4ca913c91494cb4f9cd6ce317c6",
            sign: res,
            type: "getUserAddressid",
            data: {}
          })
          .then(function(response) {
            // console.log("response", response);
            if (response.errcode == 0) {
              //接口返回成功
              if (response.data.addressid > 0) {
                console.log("默认地址的id", response.data.addressid);
                console.log("默认地址", Address);
                for(var i=0;i<Address.length;i++){
                  if(Address[i].addressid == response.data.addressid){
                    //客户设置了默认地址
                    that.mrDq = Address[i].address;
                    that.mrDz = Address[i].detail;
                    that.mrMz = Address[i].contact;
                    that.mrDh = Address[i].mobile;
                  }
                }
              }
            } else {
              that.$alert('暂未设置默认地址', '提示', {
                okLabel: '知道了'
              }).then(() => {
              });
            }
          })
          .catch(function(error) {
            // console.log("error", error);
          });
      })
      .catch(function(error) {
        // console.log("error", error);
      });

    // // 设置默认地址
    // var str = location.href;
    // // console.log('urlStr',str)
    // // var reg = /sign\/(.*)#/i
    // // var res = str.search(reg)
    // var start = str.search("sign/");
    // var end = str.search("#");
    // var start2 = parseInt(start + 5);
    // var res = str.substring(start2, end);
    // // console.log('res',res)
    // http
    //   .post("Zmhf/index", {
    //     key: "be15d4ca913c91494cb4f9cd6ce317c6",
    //     sign: 'res',
    //     type: "getUserAddressid",
    //     data: {}
    //   })
    //   .then(function(response) {
    //     // console.log("response", response);
    //     if (response.errcode == 0) {
    //       //接口返回成功
    //       if (response.data.addressid > 0) {
    //         console.log("默认地址的id", response.data.addressid);
    //         console.log("默认地址", that.items);
    //         for(i=0;i<that.items.length;i++){
    //           console.log(that.items[i].addressid)
    //         }
    //         //客户设置了默认地址
    //         that.mrDq = a;
    //         that.mrDz = b;
    //         that.mrMz = c;
    //         that.mrDh = d;
    //       }
    //     } else {
    //       that.$alert('暂未设置默认地址', '提示', {
    //         okLabel: '知道了'
    //       }).then(() => {
    //       });
    //     }
    //   })
    //   .catch(function(error) {
    //     // console.log("error", error);
    //   });
  },
  methods: {
    AddressMR: function(id, a, b, c, d) {
      this.$confirm("确定设置为默认地址？", "提示", {
        type: ""
      }).then(({ result }) => {
        if (result) {
          var addressId = id;
          console.log("addressId", addressId);
          var str = location.href;
          // console.log('urlStr',str)
          // var reg = /sign\/(.*)#/i
          // var res = str.search(reg)
          var start = str.search("sign/");
          var end = str.search("#");
          var start2 = parseInt(start + 5);
          var res = str.substring(start2, end);
          // console.log('res',res)
          let that = this;
          http
            .post("Zmhf/index", {
              key: "be15d4ca913c91494cb4f9cd6ce317c6",
              sign: res,
              type: "setUserAddressid",
              data: {
                addressid: addressId
              }
            })
            .then(function(response) {
              that.mrDq = a;
              that.mrDz = b;
              that.mrMz = c;
              that.mrDh = d;
            })
            .catch(function(error) {
              // console.log("error", error);
            });
        } else {
          console.log("点击了取消");
        }
      });
    },
    delAddress: function(id) {
      var addressId = id;
      console.log("addressId", addressId);
      console.log("删除");
      var str = location.href;
      // console.log('urlStr',str)
      // var reg = /sign\/(.*)#/i
      // var res = str.search(reg)
      var start = str.search("sign/");
      var end = str.search("#");
      var start2 = parseInt(start + 5);
      var res = str.substring(start2, end);
      // console.log('res',res)
      let that = this;
      http
        .post("Zmhf/index", {
          key: "be15d4ca913c91494cb4f9cd6ce317c6",
          sign: res,
          type: "delAddress",
          data: {
            address_id: addressId
          }
        })
        .then(function(response) {
          // console.log("response", response);
          that.$router.go(0);
        })
        .catch(function(error) {
          // console.log("error", error);
        });
    },
    // 路由跳转
    LinkTo: function(link) {
      // EventBus.$emit('LinkTo', 0)
      this.$router.push({ path: link });
    }
  },
  components: { bottomBar }
};
</script>
<style lang="scss" scoped>
.ds {
  width: 100%;
  height: 100vh;
  background-color: #efefef;
  .address-title {
    width: 100%;
    height: 2.8rem;
    line-height: 2.8rem;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .hz {
    margin-top: 0.5rem;
    width: 100%;
    height: 4.5rem;
    background-color: #fff;
    .mr {
      padding-left: 1rem;
      width: 100%;
      height: 1.5rem;
      line-height: 1.5rem;
      text-align: left;
    }
    .mrAddress {
      padding-left: 1rem;
      width: 100%;
      height: 1.5rem;
      line-height: 1.5rem;
      text-align: left;
    }
    .mrName {
      padding-left: 1rem;
      width: 100%;
      height: 1.5rem;
      line-height: 1.5rem;
      text-align: left;
    }
  }
  .address-add {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 1rem;
    margin-top: 0.5rem;
    width: 100%;
    height: 3.8rem;
    line-height: 3.8rem;
    background-color: #fff;
    font-size: 1rem;
    text-align: left;
    img {
      margin-right: 0.2rem;
      width: 1.5rem;
      height: 1.5rem;
    }
  }
  .address-list {
    margin-top: 0.5rem;
    width: 100%;
    .list {
      position: relative;
      padding-left: 1rem;
      width: 100%;
      height: 5rem;
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      .list-img {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 1rem;
        height: 1rem;
        img {
          width: 1rem;
          height: 1rem;
        }
      }
      .add {
        display: inline-flex;
        justify-content: flex-start;
        align-items: flex-end;
        width: 100%;
        height: 2.5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .name {
        display: inline-flex;
        justify-content: flex-start;
        width: 100%;
        height: 2.5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
